<template>
  <div class="flex1 leftCont">
    <!-- 筛选 -->
    <div class="task-left2 mt10" v-if="taskData.taskStatus=='待办'">
      <div class="fl">{{dataFile.title}}</div>
      <div class="fr">
        <el-button @click="btnBack()">打回</el-button>
        <el-button type="primary" @click="btnSave()" plain>办理</el-button>
        <el-button type="danger" @click="btnCancel()">作废</el-button>
      </div>
    </div>

    <div class="task-left3">任务描述</div>

    <div class="task-left4">
      <p>根据订单情况出具项目的采购申请单</p>
      <div class="task-left4-con m25">
        <div>订单编号：DF4856225-48</div>
        <div>客户名称：华硕科技</div>
        <div>订单时间：2021-12-11 12:44:15</div>
      </div>
    </div>

    <div class="task-left3">处理明细</div>

    <div class="task-left1 task-left5">
      <div class="flex1 task-left5-detail">
        <!-- <p v-html="form.noticeContent"></p> -->
        <div v-for="(item,index) in typeList" :key="index">
          <div class="div">
            {{item.activityName}}
            <span
              v-if="item.typeName=='驳回'"
              style="color:red"
            >(已{{item.typeName}})</span>
            <span v-else>(已{{item.typeName}})</span>
          </div>
          <div class="div">
            <em v-html="item.message"></em>
          </div>
          <div class="div" v-for="(items,index) in item.attachment" :key="index">
            <!-- <img :src="items.url" alt /> -->
            <p>
              {{items.name}}
              <el-button type="primary" @click="downLoad(items)">
                <span style="color:#fff!important">下载</span>
              </el-button>
            </p>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </div>

    <div class="task-left3">处理反馈</div>

    <div class="task-left1">
      <div class="p25">
        <!-- <el-button type="primary">添加附件</el-button> -->
        <FileUpload @FileList="FileList"></FileUpload>
      </div>
      <div class="p25">
        <!-- <textarea name id cols="180" rows="10"></textarea> -->
        <Editor v-model="noticeContent" :min-height="190"></Editor>
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="task-left3">办理记录</div>
    <div class="app-container">
      <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" type="index"></el-table-column>
        <el-table-column
          label="节点名称"
          align="center"
          prop="activityName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="电子签名"
          align="center"
          prop="personalName"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="签名日期" align="center" prop="time" :show-overflow-tooltip="true" />
        <el-table-column label="状态" align="center" prop="typeName"></el-table-column>
        <!-- <el-table-column label="留言" align="center" prop="message" width="180"></el-table-column> -->
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {
  getSession,
  getBusiness,
  getCommentInfo,
  getStopProcess,
  getComplete,
  getBackProcess,
} from '@/api/task/index'
// 文件上传组件
import FileUpload from '@/components/FileUpload'
export default {
  name: 'Dict',
  components: {
    FileUpload,
  },
  dicts: ['sys_normal_disable'],
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + '/dev-api/dev-api/file/upload', // 上传的图片服务器地址
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
      },
      noticeContent: '',
      input: '',
      // 表单校验
      rules: {
        dictName: [
          { required: true, message: '字典名称不能为空', trigger: 'blur' },
        ],
        dictType: [
          { required: true, message: '字典类型不能为空', trigger: 'blur' },
        ],
      },
      curItem: [
        { id: 0, title: '全部' },
        { id: 1, title: '待办' },
        { id: 2, title: '已办任务' },
      ],
      options: [
        {
          value: '选项1',
          label: '订单流程',
        },
        {
          value: '选项2',
          label: '订单流程2',
        },
      ],
      value: '',
      suPerson: '',
      textarea: '',
      dataFile: [],
      taskData: '',
    }
  },
  created() {
    this.getList()
    this.getSession()
    this.getBList()
    this.taskData = JSON.parse(localStorage.getItem('taskData'))
    console.log(typeof this.aaa)
  },
  methods: {
    /** 查询字典类型列表 */
    getList() {
      this.loading = true
      getCommentInfo(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.typeList = response.data
          this.total = 1
          this.loading = false
        }
      )
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: '0',
        remark: undefined,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.dictId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },

    FileList(val) {
      console.log(val)
      this.attachments = val
    },

    //办理
    btnSave() {
      var taskData = JSON.parse(localStorage.getItem('taskData'))
      console.log(this.form)
      let queryData = Object.assign({
        taskId: taskData.taskId,
        processInstanceId: taskData.processInstanceId,
        message: this.noticeContent,
        attachments: { ...this.attachments },
      })
      getComplete(queryData).then((response) => {
        this.$notify({
          title: '成功',
          message: '已办理',
          type: 'success',
          position: 'top-right',
        })
        this.$router.push({ path: '/task/index' })
      })
    },

    getSession() {
      getSession({ username: '10000', pwd: '888888' }).then((response) => {})
    },

    downLoad(items) {
      window.open(items.url, '_blank')
    },

    //作废
    btnCancel() {
      var taskData = JSON.parse(localStorage.getItem('taskData'))
      let queryData = Object.assign({
        taskId: taskData.taskId,
        processInstanceId: taskData.processInstanceId,
        message: this.noticeContent,
        attachments: { ...this.attachments },
      })
      getStopProcess(queryData).then((response) => {
        this.$notify({
          title: '成功',
          message: '已作废',
          type: 'success',
          position: 'top-right',
        })
      })
    },

    btnBack() {
      var taskData = JSON.parse(localStorage.getItem('taskData'))
      let queryData = Object.assign({
        taskId: taskData.taskId,
        processInstanceId: taskData.processInstanceId,
        message: this.noticeContent,
        attachments: { ...this.attachments },
      })
      getBackProcess(queryData).then((response) => {
        this.$notify({
          title: '成功',
          message: '已打回',
          type: 'success',
          position: 'top-right',
        })
      })
    },

    getBList() {
      getBusiness().then((res) => {
        this.dataFile = res.data
      })
    },
  },
}
</script>

<style lang="less" scopted>
.leftCont {
  margin: 10px 5px 10px 15px;
  .task-left1 {
    background-color: #fff;
  }
  .task-left2 {
    background-color: #fff;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
  }
  .btn-cur {
    line-height: 40px;
    width: 70px;
    text-align: center;
    border-radius: 3px;
    margin: 8px 10px 10px 10px;
    color: #2f2f2f;
    // border: 1px solid #1890ff;
    cursor: pointer;
  }
  .task-left3 {
    width: 100%;
    padding: 15px;
    margin: 15px 0;
    font-size: 22px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    line-height: 0px;
    color: #2f2f2f;
    opacity: 1;
  }
  .task-left4 {
    background-color: #fff;
    height: 190px;
    width: 100%;
    p {
      font-size: 14px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      line-height: 0px;
      color: #666666;
      opacity: 0.5;
      padding: 25px 0 0 25px;
    }
    .task-left4-con {
      width: 100%;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      div {
        width: 33.3%;
        text-align: center;
      }
    }
  }

  .task-left5 {
    padding-bottom: 50px;
    .div {
      padding: 20px 0 0 100px;
      margin: 0;
      font-size: 16px;
      span {
        color: #09c76e;
      }
      em {
        color: #888888;
        font-size: 14px;
        font-style: normal;
      }
    }
    .task-left5-detail {
      width: 100%;
      img {
        width: 400px;
        height: 200px;
        display: inline-block;
      }
      .div {
        width: 50%;
      }
    }
  }
}
.pagination-container {
  background-color: #f5f5f7 !important;
}
</style>